import styled from 'styled-components';
import { BorderColor, HeaderHeight, Ellipsis } from '../../style-config';

export const GroupListStyle = styled.div`
	width: 280px;
	height: 100%;
	background: #f7f7f7;
	border-right: 1px solid ${BorderColor};
	display: flex;
	flex-direction: column;
	.header {
		height: ${HeaderHeight}px;
		padding: 0 10px;
		border-bottom: 1px solid ${BorderColor};
		background: #f7f7f7;
		display: flex;
		align-items: center;
		column-gap: 10px;
		.plus_square {
			flex-shrink: 0;
			width: 23px;
			height: 23px;
			line-height: 22px;
			text-align: center;
			border: 1px solid #ababab;
			color: #8c8c8c;
			border-radius: 5px;
			cursor: pointer;
			.plus_outlined {
				font-size: 14px;
			}
		}
	}
	.chat_list {
		flex: 1;
		overflow-y: auto;
		.chat_item {
			height: 60px;
			display: flex;
			column-gap: 10px;
			justify-content: space-between;
			align-items: center;
			padding: 0 12px;
			cursor: pointer;
			.avatar {
				flex-shrink: 0;
				width: 40px;
				height: 40px;
			}
			.chat_info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: calc(100% - 50px);
				height: 40px;
				.chat_title,
				.chat_msg {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.chat_title {
					.title {
						width: calc(100% - 72px);
						font-size: 14px;
						${Ellipsis}
					}
					.date {
						font-size: 12px;
						color: #8f8f8f;
						${Ellipsis}
					}
				}
				.chat_msg {
					flex-shrink: 0;
					.smg {
						width: calc(100% - 30px);
						font-size: 12px;
						color: #8f8f8f;
						${Ellipsis}
					}
					.online {
						font-size: 12px;
						color: #8f8f8f;
					}
				}
			}
		}
		.active {
			background: #dedede !important;
		}
	}
`;
